<template>
  <aside id="sidebar"
         class="site-sidebar"
         :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">

      <el-menu :default-active="menuActiveName || 'home'"
               :collapse="sidebarFold"
               :collapse-transition="false"
               class="site-sidebar__menu">
        <el-menu-item index="home"
                      @click="$router.push({ name: 'home' })">
          <icon-svg name="shouye"
                    class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu index="demo">
          <template slot="title">
            <icon-svg name="shoucang"
                      class="site-sidebar__menu-icon"></icon-svg>
            <span>demo</span>
          </template>
          <el-menu-item index="demo-echarts"
                        @click="$router.push({ name: 'demo-echarts' })">
            <icon-svg name="tubiao"
                      class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">echarts</span>
          </el-menu-item>
          <el-menu-item index="demo-ueditor"
                        @click="$router.push({ name: 'demo-ueditor' })">
            <icon-svg name="editor"
                      class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">ueditor</span>
          </el-menu-item>
        </el-submenu>
        <sub-menu v-for="menu in menuList"
                  :key="menu.menuId"
                  :menu="menu"
                  :dynamic-menu-routes="dynamicMenuRoutes" />
      </el-menu>
    </div>
  </aside>
</template>

<script>
import SubMenu from './main-sidebar-sub-menu';
import { isUrl } from '@/utils/validate';
export default {
    components: {
        SubMenu,
    },
    data() {
        return {
            dynamicMenuRoutes: [],
        };
    },
    computed: {
        sidebarLayoutSkin: {
            get() {
                return this.$store.state.common.sidebarLayoutSkin;
            },
        },
        sidebarFold: {
            get() {
                return this.$store.state.common.sidebarFold;
            },
        },
        menuList: {
            get() {
                return this.$store.state.common.menuList;
            },
            set(val) {
                this.$store.commit('common/updateMenuList', val);
            },
        },
        menuActiveName: {
            get() {
                // console.log(5555);
                return this.$store.state.common.menuActiveName;
            },
            set(val) {
                // console.log(2222, val);
                this.$store.commit('common/updateMenuActiveName', val);
            },
        },
        mainTabs: {
            get() {
                return this.$store.state.common.mainTabs;
            },
            set(val) {
                this.$store.commit('common/updateMainTabs', val);
            },
        },
        mainTabsActiveName: {
            get() {
                return this.$store.state.common.mainTabsActiveName;
            },
            set(val) {
                this.$store.commit('common/updateMainTabsActiveName', val);
            },
        },
    },
    watch: {
        $route: 'routeHandle',
    },
    created() {
        this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]');
        // console.log(this.menuList);
        // this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
        this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]');
        this.routeHandle(this.$route);

        // 在页面刷新时将vuex里的信息保存到localStorage里
        window.addEventListener('beforeunload', () => {
            localStorage.setItem('store', JSON.stringify(this.$store.state));
        });

        // 在页面加载时读取localStorage里的状态信息
        // if(localStorage.getItem("store")){
        // this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("store"))))
        // }
    },
    methods: {
        // 路由操作
        routeHandle(route) {
            // console.log(route.meta);
            if (route.meta.isTab) {
                // tab选中, 不存在先添加
                var tab = this.mainTabs.filter(item => item.name === route.name)[0];
                if (!tab) {
                    if (route.meta.isDynamic) {
                        route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0];
                        if (!route) {
                            return console.error('未能找到可用标签页!');
                        }
                    }
                    tab = {
                        menuId: route.meta.menuId || route.name,
                        name: route.name,
                        title:
                            this.$route.query && this.$route.query.title
                                ? this.$route.query.title
                                : route.meta.title,
                        type: isUrl(route.meta.iframeUrl) ? 'iframe' : 'module',
                        iframeUrl: route.meta.iframeUrl || '',
                        params: route.params,
                        query: route.query,
                    };
                    this.mainTabs = this.mainTabs.concat(tab);
                }
                //   else {
                //     let str = JSON.stringify(this.mainTabs)
                //     var arr = JSON.parse(str)
                //     for(let x in arr) {
                //
                //       if(arr[x].name == route.name) {
                //         arr[x].title = route.query.title
                //       }
                //     }

                //     this.$store.commit("common/updateMainTabs", arr)
                //   }
                this.menuActiveName = tab.menuId + '';
                this.mainTabsActiveName = tab.name;
            } else {
                this.menuActiveName = route.meta.menuId + '';
            }
        },
    },
};
</script>
